<template>
  <div class="mv" v-if="isRouterActive">
    <page-list-layout v-if="Object.keys(mvData).length > 0">
      <template v-slot:one>
        <div class="flex items-center mt-2 mb-2">
          <span class="border-1 text-red yu-titleColor pl-1 pr-1 mr-2">MV</span>
          <ul class="flex items-end">
            <li><h3 class="mt-0 mb-0">{{ mvData.name ?? mvData.title }}</h3></li>
            <li
                v-for="artist in mvData.artists ?? [mvData.creator]"
                :key="artist.id ?? artist.userId"
                class="text-xs ml-2 yu-textColor-hover mr-1"
                @click="jumpArtist(artist.id ?? artist.userId)"
            >
              {{ artist.name ?? artist.nickname }}
            </li>
          </ul>
        </div>
        <div id="mui-player"></div>
        <header-actions
            :isAllPlay="false"
            :isAddPlaylist="false"
            :isAddMusicList="false"
            :isDownload="false"
            :isReview="false"
            :isSubscription="false"
            :actionsData="mvData"
            :isLike="true"
            :isLikeType="store.currentInfo.type === 10 ? 1 : 5"
        />
      </template>
      <template v-slot:two>
        <Review/>
      </template>
      <template v-slot:top>
        <Desc :desc="mvData"/>
      </template>
      <template v-slot:center>
        <Correlation :correlation="mvs"/>
      </template>
    </page-list-layout>
    <loading v-else/>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import HeaderActions from '@/components/HeaderActions/index.vue'
import Loading from '@/components/Loading/index.vue'
import Review from '@/components/Review/index.vue'
import Desc from './components/Desc.vue'
import Correlation from './components/Correlation.vue'
import {nextTick, provide, reactive, ref, toRefs} from "vue";
import {
  getMvDetail,
  getMvDetailInfo,
  getMvUrl,
  getRelatedAllvideo,
  getSimiMv,
  getVideoDetail,
  getVideoUrl
} from "../../api/mv/index.js";
import {useRoute, useRouter} from "vue-router";
import MuiPlayer from 'mui-player'
import 'mui-player/dist/mui-player.min.css'
import {useStore} from "@/store/index";
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
import {customSetting} from "./index.js";

const store = useStore()
const route = useRoute()
const router = useRouter()

const mvOrVideo = !(/[a-zA-Z]/g.test(route.query.id))

const state = reactive({
  mvData: {}, // mv详情数据
  r: 1080, // mv播放的url分辨率参数
  mvs: [] // 类似的mv
})

const {mvData, mvs} = toRefs(state)

let mp = null

// 第一个参数分辨率数据数组， data需要的是播放地址，还有当前的清晰度
const muiPlayerFn = (brs, data) => {
  if (mp && mp.video()) {
    // 情况播放的src
    mp.video().src = null
    // // 销毁视频
    mp.video().remove()
  }
  mp = new MuiPlayer({
    container: '#mui-player',
    volume: 1,
    autoplay: true,
    src: data.url,
    themeColor: store.theme.secondaryBgColor,
    plugins: [
      new MuiPlayerDesktopPlugin({
        customSetting: customSetting(brs, data.r, ({functions}) => {
          if (mvOrVideo) getMvUrlFn({id: route.query.id, r: functions * 1}, state.mvData.brs)
        })
      })
    ]
  })
}

// 下方是mv数据
//MV获取 播放url
const getMvUrlFn = (params, brs) => {
  if (mvOrVideo) {
    getMvUrl(params).then(res => {
      const {code, data} = res
      if (code === 200) {
        muiPlayerFn(brs, data)
      }
    })
  }else {
    getVideoUrl(params.id).then(res => {
      const {code, urls} = res
      if (code === 200) {
        muiPlayerFn(brs, urls[0])
      }
    })
  }
}

// 获取mv详情
const getPlayVideo = () => {
  store.currentInfo.type = mvOrVideo ? 10 : 11
  store.currentInfo.id = route.query.id
  // mvOrVideo true 是Mv 否则是视频
  const getRequest = mvOrVideo ? getMvDetail : getVideoDetail
  getRequest(route.query.id).then(res => {
    const {code, data, mp} = res
    if (code === 200) {
      state.mvData = data
      console.log(res)
      getMvUrlFn({id: route.query.id, r: mp?.pl ? mp.pl: data.resolutions[0].resolution}, data.brs ? data.brs : data.resolutions)
      mvOrVideo && getMvDetailInfoFn()
      mvOrVideo ? store.getCommentMv() : store.getCommentVideo()
      getSimiMvFn()
    }
    console.log(res)
  })
}

//

// 获取数据分享，收藏，喜欢的数据
const getMvDetailInfoFn = () => {
  getMvDetailInfo(route.query.id).then(res => {
    state.mvData = {
      ...state.mvData,
      ...res
    }
    console.log(state.mvData)
  })
}

// 获取相似mv
const getSimiMvFn = () => {
  const getRequest = mvOrVideo ? getSimiMv : getRelatedAllvideo
  getRequest(route.query.id).then(res => {
    console.log(res)
    const {code, mvs, data} = res
    if (code === 200) state.mvs = mvs ?? data
    console.log(res)
  })
}

// 跳转到歌手
const jumpArtist = (id) => {

  router.push({
    path: mvOrVideo ? '/artist' : '/user',
    query: {
      id
    }
  })
}

getPlayVideo()

// // 页面级依赖注入不会刷新整个页面
const isRouterActive = ref(true)
// 页面级依赖注入不会刷新整个页面
provide('reloadPage', () => {
  isRouterActive.value = false
  nextTick(() => {
    getPlayVideo()
    isRouterActive.value = true
  })
})
</script>

<style scoped>

</style>
